<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Vue2检测数据改变 数组</title>
</head>
<body>
    <div id="app">
        <button @click="addAge">年龄+1岁</button><br>
        <button @click="addSex">添加性别属性，默认为男</button><br>
        <button @click="addFriend">在列表首位添加一个朋友</button><br>
        <button @click="chengeName('张三')">修改第一个朋友名字为：张三</button><br>
        <button @click="addHoddy">添加一个爱好</button><br>
        <button @click="changeHoddy('开车')">修改第一个爱好为：开车</button><br>
        <h3>姓名：{{student.name}}</h3>        
        <h3>年龄：{{student.age.rage}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h1>爱好</h1>
        <ul>
            <li v-for="h in student.hobbys" :key="h">
                {{h}}
            </li>
        </ul>
        <h1>朋友</h1>
        <ul>
            <li v-for="p in student.friends" :key="p.name">
                <b>{{p.name}}--{{p.age}}</b>
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                student:{
                    name:'tom',
                    age:{
                        rage:40,
                        sage:29
                    },
                    hobbys:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'Amy',age:13},
                        {name:'Jake',age:23},
                    ]
                }
            },
            methods:{
                addAge(){
                    this.student.age.rage++
                },
                addSex(){
                    this.$set(this.student,'sex','男')
                },
                addFriend(){
                    let firend = {name:'小红',age:20}
                    this.student.friends.unshift(firend)
                },
                chengeName(val){
                    this.student.friends[0].name = val
                    // this.student.friends[0] = {name:val, age:this.student.friends[0].age}   不奏效
                },
                addHoddy(){
                    this.student.hobbys.push('学习')
                },
                changeHoddy(val){
                    this.student.hobbys.splice(0,1,val)
                    // this.$set(this.student.hobbys, 0, val)  或者用this.$set()
                    // this.student.hobbys[0] = '学习'  不奏效
                }
            }
        })
        // push pop shift unshift splice sort reverse 
        // 
    </script>
</body>
</html>